<template>
  <!-- 中银证券 直播预告更多 页面 -->
	<div class="live-com-more-box" :class="[com_box]">
		<HeaderNav v-if="$channel=='zyzq'&&getPlatform =='app'" :title="'直播预告'"></HeaderNav>
		<div v-else class="list-header">
			<div class="header-left">
				<p class="header-title">直播预告</p>
			</div>
		</div>
		<div class="list-connect">
			<ul>
				<li v-for="(v,index) in dataArray" :key="index" @click="goToLive(v.acct,v.roomId)">
					<template v-if="v.roomStatus=='1'">
						<div class="live-status" v-html= 'live_tip'>
							直播中
						</div>
					</template>
					<template v-if="v.roomStatus=='0'">
						<div class="live-status-yg" v-html= 'fre_tip'>
							预告
						</div>
					</template>
					<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" />
					<p class="li-title">{{v.title}}</p>
					<div class="li-intor">
						<p>{{v.beginTime}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import HeaderNav from '../../components/zyzq/headerNav'
	export default {
		components:{
          HeaderNav,
		},
		props: {},
		data() {
			return {
        dataArray: [], //直播数组
        com_box: '',
        live_tip: '直播中',
		fre_tip: '预告',
		getPlatform:fun.getPlatform(), //app wx
		scroll:0,//页面滚动距离
			}
		},
		beforeRouteLeave(to, from, next) {
			let pathList =[`/${channel}/mine`,`/${channel}/telChannel`] //除了首页二级页面 从其它页面过来滚动到最顶部
			if(pathList.includes(to.path)){
			    this.scroll = 0
			}else{				
				this.scroll = document.getElementsByClassName( "list-connect")[0].scrollTop;		
			} 
		   next();
      },
    activated:function(){
      this.$store.dispatch("showNav");
	  document.getElementsByClassName( "list-connect")[0].scrollTop = this.scroll;//设置滚动
    },
		computed: {},
		created() {
			fun.dotNum('liveMorePage')
			this.$store.dispatch("hideNav");
      this.getRoomList();
      if (this.$channel == 'zxyh') {
        this.com_box = 'zxyh-live-more'
        this.live_tip = '正在直播'
        this.fre_tip = '直播预告'
      }
		},
		mounted() {
		},
		methods: {
			getRoomList() {
				this.$http
					.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`)
					.then(res => {
						if(res.data.code == "000000") {
							this.dataArray = [ ...res.data.data.startRoomList,...res.data.data.forecastRoomList];
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			goToLive(anchor, roomId) {
                 this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
			},
		}
	};
</script>

<style scoped="scoped">
  .live-com-more-box {
    width: 100vw;
    height: 100vh;
    background: white;
  }
.list-header.list-header-zyzq{
	height: 88px;
}
	.list-header {
		width: 100vw;
		height: 80px;
		/*background: darkgray;*/
		display: flex;
		align-items: center;
		/*padding: 0 30px;*/
	}
	
	.header-left,
	.header-right {
		height: 80px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.header-right {
		justify-content: flex-end;
		margin-right: 45px;
	}

	.header-title {
		width: 100vw;
		height: 80px;
		font-size: 34px;
		font-weight: 500;
		color: #333333;
		text-align: center;
		line-height: 80px;
	}
	
	.header-more {
		font-size: 22px;
		font-weight: 300;
		color: rgba(102, 102, 102, 1);
		line-height: 40px;
		margin-right: 6px;
	}
	
	.list-connect {
		width: 100vw;
		height: calc(100vh - 80px);
    overflow-y: scroll;
    padding-bottom: 20px;
	}
	.list-header.list-header-zyzq ~.list-connect{
        height: calc(100vh - 88px);
	}
	
	.list-connect ul {
		display: flex;
		flex-wrap: wrap;
		/*-webkit-flex-wrap: wrap;*/
		padding-top: 30px;
	}
	
	.list-connect ul li {
		width: 330px;
		margin-left: 30px;
		margin-top: 20px;
		position: relative;
	}
	
	.list-connect ul li:nth-child(2),
	.list-connect ul li:nth-child(1) {
		margin-top: 0;
	}
	
	.list-connect ul li img {
		width: 330px;
		height: 187px;
		background: darkgray;
		border-radius: 8px;
	}
	
	.li-title {
		max-width: 330px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		margin-top: 18px;
		padding-left: 6px;
		margin-bottom: 10px;
	}
	
	.li-intor {
		width: 100%;
		color: #999999;
		line-height: 32px;
		padding-left: 6px;
		white-space: pre-wrap;
		font-size: 24px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.live-status {
		background: linear-gradient(0deg, rgba(204, 45, 48, 1), rgba(247, 127, 108, 1));
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		font-size: 18px;
    border-radius: 8px 0px 8px 0px;
    padding: 6px 18px;
    box-sizing: border-box;
	}
	.live-status-yg {
		background:linear-gradient(0deg,rgba(0,127,216,1),rgba(0,184,217,1));
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		font-size: 18px;
    border-radius: 8px 0px 8px 0px;
    padding: 6px 18px;
    box-sizing: border-box;
	}

  .zxyh-live-more .list-connect ul {
    padding-top: 30px;
  }

  .zxyh-live-more ul li {
    width: 710px;
    height: 379px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .zxyh-live-more ul li img {
    width: 710px;
    height: 379px;
  }

  .zxyh-live-more .li-intor {
    display: none;
  }

  .zxyh-live-more .li-title {
    max-width: 710px;
    width: 710px;
    position: absolute;
    bottom: 0;
    padding-top: 30px;
    padding-left: 22px;
    padding-bottom: 20px;
    margin: 0;
    background:linear-gradient(0deg,rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
    font-size:28px;
    font-family:Source Han Sans CN;
    font-weight:bold;
    color:rgba(255,255,255,1);
    border-radius:0 0 8px 8px;
  }

  .zxyh-live-more ul li:nth-child(2) {
		margin-top: 20px;
	}

  .zxyh-live-more .live-status {
    font-size: 26px;
    padding: 12px 14px;
  }

  .zxyh-live-more .live-status-yg {
    font-size: 26px;
    padding: 12px 14px;
   }
</style>